<template>
  <div class="attr-list">
    <CommonForm :onChange="handleChange" :formData="pageSetting.globalTitleStyle" :formJson="formJson" />
  </div>
</template>

<script >
import { mapState } from 'vuex'
import getStyleFormJson from "./setting"

import CommonForm from "@/components/CommonForm"
import { addSnapshot } from "../../../lib/utils"
import { updateAllAnalysisComponent, updateAllAnalysisComponentTitle } from '../../../lib/analysisData'
import { analysisComponentUpdateTypes } from '../../../lib/const'

export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapState("lowCode", {
      pageSetting: state => state.pageSetting
    }),
    formJson () {
      return getStyleFormJson()
    }
  },
  components: {
    CommonForm,
  },
  methods: {
    handleChange (fieldName, value) {
      console.log(fieldName, value)
      this.pageSetting.globalTitleStyle[fieldName] = value
      this.$store.commit("lowCode/setPageSetting", this.pageSetting)
      updateAllAnalysisComponentTitle(true, undefined, analysisComponentUpdateTypes.title)
      addSnapshot('page', {
        pageSetting: this.pageSetting
      })
    },

  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
